<app-common-header [title]="'myAccount.add_bank_account.account_info.title' | translate"></app-common-header>
<ion-content>
  <div>
    <form >
      <ion-grid>
        <ion-row class="input_bottom_color">
          <ion-col size="4">
            <ion-label class="label_top">
              <ion-text color="" class="input_label">
                {{'myAccount.add_bank_account.account_info.account_type' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
          <ion-col size="8">
            <ion-label class="label_top ion-float-right">
              <ion-text color="" class="input_label font-w6 ">
              {{accountInfo.accountType == 0 ? 'Debit Card' : 'Credit Card'}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color" [hidden]="!hiddenBox">
          <ion-col size="4">
            <ion-label class="label_top">
              <ion-text color="" class="input_label">
                {{'myAccount.add_bank_account.account_info.exp_date' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
          <ion-col size="8">
            <ion-label class="label_top ion-float-right">
              <ion-text color="" class="input_label font-w6">
                  {{accountInfo.expDate | date: 'MM/dd'}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color" [hidden]="!hiddenBox">
          <ion-col size="4">
            <ion-label class="label_top">
              <ion-text color="" class="input_label">
                {{'myAccount.add_bank_account.account_info.CVV' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
          <ion-col size="8">
            <ion-label class="label_top ion-float-right">
              <ion-text color="" class="input_label font-w6">
                  {{accountInfo.cvv}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color" >
          <ion-col size="4">
            <ion-label class="label_top">
              <ion-text color="" class="input_label">
                {{'myAccount.add_bank_account.account_info.mobile_number' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
          <ion-col size="8">
            <ion-label class="label_top ion-float-right">
              <ion-text color="" class="input_label font-w6">
                {{accountInfo.mobileNumber | hidePhonePipe}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color">
          <ion-col size="1" class="icon_padding_top">
            <ion-icon name="radio-button-off-outline" class="agreement_icon" *ngIf="consentAgreement" (click)="changeConsentAgreement()"></ion-icon>
            <ion-icon name="checkmark-circle" class="agreement_icon" *ngIf="!consentAgreement" (click)="changeConsentAgreement()"></ion-icon>
          </ion-col>
          <ion-col size="11">
            <ion-label class="label_top">
              <ion-text color="" class="text_agreement">
                {{'myAccount.add_bank_account.account_info.agreement' | translate}}
                <span class="agreement"> <a  [routerLink]="[ '/tabs/myAccount/comm-agreement']">  {{'myAccount.add_bank_account.account_info.agreement_link' | translate}}  </a></span>
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="wathet" [disabled]="consentAgreement" (click)="toNext()">
              {{'myAccount.add_bank_account.account_info.next_btn' | translate}}
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </div>
</ion-content>
